//1.创建vm对象
let vm = new Vue({
  //通过id="app"标签，获取vue页面
  el: "#app",
  data() {
    return {
      user: {
        password: "",
        mobile: "",
        code:'',
        shortMSG:'',
        openid: ''
      },
      allowed: false,
      //错误提示
      errorName: false,
      errorNameMessage: "",
      errorPassword: false,
      errorPasswordMessage: "",
      errorPassword2: false,
      errorPassword2Message: "",
      errorMobile: false,
      errorMobileMessage: "",
      errorAllowed: false,
      errorAllowedMessage: "",
      errorCode: false,
      errorCodeMessage: "",
      errorShort: false,
      errorShortMSG: "",

      codeImg: '',//验证码图片
      uuid: '',//自动生成图形验证码需要的uuid
      code: '',//验证码
      shortMSG: '',//短信验证码
      shortMSGTip: '获取短信验证码',//验证码按钮文字
      sendFlag: true,//true=可以发送验证码

      openid:'',
    }
  },
  mounted() {
    // this.shortMSGTip = "获取短信验证码"
    // this.openid=5679
    this.getCodeImg()

  },
  methods: {
    usernameBlur() {
      let reg = /^[a-zA-Z0-9_-]{3,20}$/
      if (reg.test(this.user.username)) {
        this.errorName = false
        //用户名重复判定
        axios.get('/username/' + this.user.username + '/count/', {responseType: 'json'})
          .then((resp) => {
            console.log("响应成功1：", resp)
            if (resp.data.count > 0) {
              this.errorNameMessage = "用户名已存在！"
              this.errorName = true
              console.log("??", this.errorName, this.errorNameMessage)
            }
          })
          .catch((e) => {
            console.log("请求异常：", e)
          })
      } else {
        this.errorName = true
        this.errorNameMessage = "请输入3-20个字符的用户名，不包含中文！"
      }
      console.log("姓名校验6-20字符：", this.user.username)
    },
    passwordBlur() {
      console.log("密码校验：", this.user.password)
      let reg = /^[0-9a-zA-Z]{6,20}$/
      if (reg.test(this.user.password)) {
        this.errorPassword = false
      } else {
        this.errorPassword = true
        this.errorPasswordMessage = "请输入6-20个字符的密码，不包含中文！"
      }
    },
    password2Blur() {
      console.log("确认密码校验：", this.user.password2)
      if (this.user.password == this.user.password2) {
        this.errorPassword2 = false
      } else {
        this.errorPassword2 = true
        this.errorPassword2Message = "两次输入的密码不一致，请重新输入！"
      }
    },
    mobileBlur() {
      console.log("手机号校验：", this.user.mobile)
      reg = /^1[3-9]\d{9}$/
      if (reg.test(this.user.mobile)) {
        this.errorMobile = false

        //手机号重复接口

        // axios.get('/mobile/' + this.user.mobile + '/count/', {responseType: 'json'})
        //   .then((resp) => {
        //     console.log("响应成功：", resp)
        //     if (resp.data.count > 0) {
        //       this.errorMobile = true
        //       this.errorMobileMessage = "手机号已存在！"
        //     }
        //   })
        //   .catch((e) => {
        //     console.log("请求异常：", e)
        //   })

      } else {
        this.errorMobile = true
        this.errorMobileMessage = "请输入正确的手机号！"
      }

      return this.errorMobile
    },
    checkCodeBlur() {
      let reg = /^[a-zA-Z0-9_-]{4}$/
      if (reg.test(this.code)) {
        this.errorCode = false
        // axios.get('/checkCode/' + this.code + '/' + this.uuid + '/count/', {responseType: 'json'})
        //   .then((resp) => {
        //     console.log("响应数据:", resp)
        //   })
        //   .catch((e) => {
        //     console.log("请求异常：", e)
        //   })
      } else {
        this.errorCode = true
        this.errorCodeMessage = "请填写完整的验证码"
      }

      return this.errorCode
    },
    checkShortMSG() {
      let reg = /^[0-9]{4}/
      if (reg.test(this.shortMSG)) {
        this.errorShort = false
      } else {
        this.errorShort = true
        this.errorShortMSG = "请输入短信验证码"
      }
    },
    sendShortMSG() {
      let that = this
      if (!this.sendFlag) {
        return
      }
      console.log('this.mobileBlur():',this.mobileBlur())
      if (this.mobileBlur()) {
        return;
      }

      if(this.checkCodeBlur()){
        return;
      }

      if (!this.errorMobile && !this.errorCode) {
        let url = '/sendSMS/' + this.user.mobile + '/?code=' + this.code + '&uuid=' + this.uuid
        console.log("???", url)
        let header = {
          responseType: 'json'
        }
        axios.get(url, header).then((resp) => {
          console.log("响应成功：", resp)
          if (resp.data.code == '0') {
            this.errorShort = false
            let num = 60
            //倒计时，一秒刷新，单位为毫秒：定时器欲要成为变量标识
            let time = setInterval(() => {
              if (num == 1) {
                //删除定时器，需要传入一个定时器的标识
                clearInterval(time)
                this.shortMSGTip = '获取短信验证码'
                this.sendFlag = true
                //TODO 删除redis中的图形验证码
                this.getCodeImg()
              } else {
                num -= 1
                this.shortMSGTip = num + '秒'
                this.sendFlag = false
              }
            }, 1000)
          } else {
            //提示错误信息
            console.log("resp.data.code: ", resp.data.code)
            if (resp.data.code == '4000') {
              //验证码过期
              this.getCodeImg()
            } else if (resp.data.code == '4001') {
              //验证码错误
            } else if (resp.data.code == '4002') {
              //节流throttling（频繁调用发送短信接口）
            } else {
              //其他错误

            }
            this.errorShort = true
            this.errorShortMSG = resp.data.respMsg
          }
        }).catch((e) => {
          console.log("发送失败：", e.response)
        })
      }
    },
    allowedChange() {
      console.log("同意协议校验：", this.allowed)
      if (this.allowed) {
        this.errorAllowed = false
      } else {
        this.errorAllowed = true
        this.errorAllowedMessage = "请阅读并同意'美多商城用户协议！'"
      }
    },
    getCodeImg() {
      let that=this
      this.uuid = generateUUID()
      this.codeImg = '/getCode/' + this.uuid + '/'
      //不可使用axios，获取的是图片，会报错
      // axios.get('/getCode/' + this.uuid + '/').then((resp) => {
      //   console.log("获取成功：", resp)
      //   this.codeImg = resp
      // }).catch((e) => {
      //   console.log("获取验证码失败！", e)
      // })

      let openidNo=document.getElementById("openidNo")
      console.log("openidNo=",openidNo.innerText)
      if(openidNo){

        this.openid=openidNo.innerText.substring(2,openidNo.innerText.length-1)
      }
      // 这是个伪的
      // this.openid="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaWQiOjE2NjE5OTU0ODAwLCJvcGVuaWQiOjEyMzQ1Njc4OX0.Z3t3F5e48DGNMBIOUL9M8wJINaqGwnT8DmvjuO4r"
      console.log("this.openid: ",this.openid)
      this.$forceUpdate()
    },
    save() {

      this.mobileBlur()
      this.passwordBlur()
      this.checkCodeBlur()
      this.checkShortMSG()

      if(this.openid==''){
        this.errorAllowed = true
        this.errorAllowedMessage = "尚未获取'腾讯QQ'授权信息，请重新登录授权！"
        window.event.returnValue = false
      }else{
        this.user.openid=this.openid
        this.errorAllowed = false
        window.event.returnValue = true
      }

      console.log("保存"+this.openid)

      if (this.errorPassword || this.errorMobile || this.errorCode || this.errorShort || this.errorAllowed) {
        //禁用表单提交时间
        window.event.returnValue = false
      }

      console.log("揍你")
    },
  }
})